<template>
  <borderContainer class="team-detail" bg-color="#fffbea" bd-color="#f6ce89">
    <view class="team-detail-title">
      <view>按花瓣数排序</view>
      <view>花瓣数</view>
      <view class="clock-days">累计打卡天数</view>
      <view v-if="isInGroup">是否打卡</view>
    </view>
    <view class="team-detail-list">
      <view
        v-for="(item, index) in groupRank"
        :key="item.id"
        class="list-item"
        :class="getActiveClass(item.id)"
      >
        <image
          v-if="isTheTopThreeSort(index)"
          :lazy-load="true"
          class="list-item-sort"
          :src="handleTheTopThreeImg(index)"
        />
        <view v-else class="list-item-sort" :src="handleTheTopThreeImg(index)">
          {{ index + 1 }}
        </view>
        <!-- 用户头像 -->
        <image :lazy-load="true" class="list-item-avatar" :src="item.avatar" />
        <view class="list-item-name">
          {{ item.username }}
        </view>
        <view class="list-item-petal">
          {{ formatZeroNumber(item.petal_num) }}
        </view>
        <view class="punch-card">
          {{ formatZeroNumber(item.total_clock_num) }}
        </view>
        <view class="is-punch-card" v-if="isInGroup">
          {{ isPunchCardText(item.clock_status) }}
        </view>
      </view>
    </view>
    <cloudTitle class="team-detail-topTip">
      团队详情
    </cloudTitle>
  </borderContainer>
</template>

<script>
import cloudTitle from "./cloud-container";
import borderContainer from "@/components/border-box/index";
const THE_FIRST = require("@/assets/icon/champion.png");
const THE_SECOND = require("@/assets/icon/top-spot.png");
const THE_THIRD = require("@/assets/icon/third.png");
const THe_TOP_THREE_IMG = [THE_FIRST, THE_SECOND, THE_THIRD];
const THE_TOP_THREE = 3;
const IS_PUNCH = {
  //是否打卡 0否 1是
  0: "否",
  1: "是"
};
const ZERO = 0;
export default {
  components: {
    cloudTitle,
    borderContainer
  },
  props: {
    groupRank: { type: Array, default: () => [] },
    student_id: {
      type: Number,
      default: 0
    },
    isInGroup: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    /**格式化为0的情况 */
    formatZeroNumber(value) {
      return value == ZERO ? "-" : value;
    },
    /**前三甲显示对应的图片 */
    handleTheTopThreeImg(index) {
      return THe_TOP_THREE_IMG[index];
    },
    /**是否为前三甲 */
    isTheTopThreeSort(index) {
      return index < THE_TOP_THREE;
    },
    isPunchCardText(status) {
      return IS_PUNCH[status];
    },
    getActiveClass(id) {
      return {
        "list-active": this.student_id === id
      };
    }
  }
};
</script>

<style lang="scss">
@import "../scss/group-common.scss";
.team-detail {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 90px 34px 0;
  margin-bottom: 30px;
  &-title {
    box-sizing: border-box;
    height: 34px;
    padding-left: 2px;
    margin-bottom: 32px;
    display: flex;
    .clock-days {
      flex: 1;
      text-align: center;
    }
    view {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #303133;
      &:nth-child(1) {
        margin-right: 120px;
        color: #909399;
      }
      &:nth-child(2),
      &:nth-child(3) {
        margin-right: 24px;
      }
    }
  }
  &-list {
    .list-item {
      height: 106px;
      box-sizing: border-box;
      border-top: 2px dashed #606266;
      line-height: 104px;
      color: #303133;
      font-size: 24px;
      display: flex;
      align-items: center;
      &:last-child {
        padding-bottom: 10px;
      }
      image.list-item-sort {
        width: 50px;
        height: 50px;
        margin-right: 8px;
      }
      view.list-item-sort {
        position: relative;
        text-align: center;
        line-height: 44px;
        width: 58px;
        @include base-text(44px, 32px, #303133);
        &::after {
          content: "";
          position: absolute;
          width: 32px;
          height: 6px;
          background-image: url("~@/assets/icon/team-num.png");
          background-size: 100% 100%;
          left: 50%;
          transform: translateX(-50%);
          bottom: 14px;
        }
      }
      &-avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-right: 8px;
      }
      &-name {
        width: 122px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #303133;
        margin-right: 20px;
        @extend %base-one-hide;
      }
      %base-style {
        margin-right: 24px;
        text-align: center;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #303133;
      }
      &-petal {
        width: 72px;
        @extend %base-style;
        @extend %base-one-hide;
      }
      .punch-card {
        flex: 1;
        @extend %base-one-hide;
        @extend %base-style;
      }
      .is-punch-card {
        @extend %base-one-hide;
        width: 96px;
        @extend %base-style;
        margin-right: 0;
      }
    }
    .list-active {
      .list-item-name,
      .list-item-petal,
      .punch-card,
      .is-punch-card {
        color: #ff8000;
      }
    }
  }
  &-topTip {
    top: -90px;
  }
}
</style>
